<template>
<div>
  <navigationBar
      ref="nav"
      @loginSuccess="handleLoginSuccess"
      @loginClose="handleLoginCancel"/>
  <div class="blog">
    <div class="blog-main">
      <div class="blog-top">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>{{ blog.categoryName }}</el-breadcrumb-item>
          <el-breadcrumb-item>{{ blog.title }}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="blog-content">
        <div class="blog-item">
          <h2 class="title">{{ blog.title }}</h2>
          <div class="content" v-html="blog.content">
          </div>
        </div>
      </div>
      <div class="block">
        <div class="evaluation-all">
          <div class="evaluation-all-content">
            <div class="evaluation-all-content-hea">
              <div class="evaluation-all-content-left">
                <span>{{ score }}</span>
              </div>
              <div class="evaluation-all-content-right">
                <el-rate :value="score" :disabled="true"></el-rate>
                <div class="content-right-pj">共 {{ commentListSize }} 条评价</div>
              </div>
            </div>
          </div>
        </div>
        <div class="evaluation-content">
          <div class="content-item" v-for="comment in commentList">
            <div class="item-avatar">
              <a href="">
                <img
                    src="https://learnercms.oss-cn-beijing.aliyuncs.com/avatar/2021/10/25/c581b7b0-64ab-414a-917f-27ccde67bcbd.jpg"
                    alt="">
              </a>
            </div>
            <div class="item-info">
              <div class="item-info-top">
                <div class="left">{{ comment.nickname }}</div>
                <div class="right">
                  <el-rate :value="Number(comment.score)" :disabled="true"></el-rate>
                </div>
              </div>
              <div class="item-info-center">
                {{ comment.content }}
              </div>
              <div class="item-info-bottom">
                <div class="left">发表于：{{ comment.createTime }}</div>
                <div class="right"><i class="iconfont icon-dianzan"></i> <span>666</span></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="blog-nav">
      <div class="blog-nav">
        <div class="blog-user">
          <div class="user">
            <div class="blog-user-img">
              <img
                  src="https://learnercms.oss-cn-beijing.aliyuncs.com/avatar/2021/10/25/c581b7b0-64ab-414a-917f-27ccde67bcbd.jpg"
                  alt="">
            </div>
            <div class="blog-user-name">ice2020x</div>
          </div>
        </div>
        <div class="blog-nav-top">
          <p>
            TOP 6 排行榜
          </p>
          <ul>
            <li v-for="blog in topBlogList">
              <div class="blog-nav-top-title">{{ blog.title }}</div>
              <div class="blog-nav-top-bottom">
                <div>访问量: {{ blog.viewCount }}</div>
                <div>评论数量: {{ blog.commentCount }}</div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

</template>

<script>
import {getBolgListBySearch,getCommentList,queryById} from "@/api";
import navigationBar from "@/components/navigationBar/navigationBar";

export default {
  name: 'blog',
  components: {
    navigationBar
  },
  data() {
    return {
      blogId: '',
      total: 0,
      topBlogList: {},
      blog: {},
      score: 4.7,
      commentList: [],
      commentListSize: 0
    }
  },
  methods: {
    async getBlogListById() {
      this.blogId = this.$route.params.id ?? '';
      let res = await queryById(this.blogId)
      if (res.success) {
        this.blog = res.data
      } else {
        this.$message.error('获取博客信息失败')
        this.$refs.nav.showLoginPopup = true;
      }
    },
    // 获取top6 排行榜
    async getTopBolgList() {
      let res = await getBolgListBySearch(
          1,
          6,
          "",
          'view_count'
      )
      if (res.success) {
        this.topBlogList = res.data.records
      } else {
        this.$message.error('获取排行榜列表失败')
      }
    },
    async getCommentList() {
      let {data: res} = await getCommentList(this.blogId)
      if (res.success) {
        this.commentList = res.data.list
        this.commentListSize = res.data.list.length
        this.getScore()
      } else {
        this.$message.error('加载评论列表失败，请稍后重试')
      }
    },
    getScore() {
      let arr = this.commentList
      let score = 0
      arr.forEach(item => {
        score += Number(item.score)
      })
      this.score = (score / this.commentListSize).toFixed(1)
    },
    handleLoginSuccess() {
      this.getBlogList()
      this.getTopBolgList()
      this.getCateList()
    },
    handleLoginCancel() {
      this.$router.back()
    }
  },
  created() {
    this.getTopBolgList()
    this.getBlogListById()
    this.getCommentList()
  }
}
</script>

<style scoped lang="scss">
@import "blogId";
</style>
